/*
 * @Author: szx
 * @Date: 2022-04-29 16:57:52
 * @LastEditTime: 2022-04-29 19:28:54
 * @Description:
 * @FilePath: \learn\React学习\todo-list\src\components\Item\index.jsx
 */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import './index.css';

export default class index extends Component {
    static propTypes = {
        id: PropTypes.string.isRequired,
        name: PropTypes.string.isRequired,
        done: PropTypes.bool.isRequired,
        updateTodo: PropTypes.func.isRequired,
        deleteTodo: PropTypes.func.isRequired
    };
    state = { mouse: false };

    handleMouse = (flag) => {
        return () => {
            this.setState({ mouse: flag });
        };
    };

    handleCheck = (id) => {
        return (e) => {
            this.props.updateTodo(id, e.target.checked);
        };
    };

    handleDelete = (id) => {
        if (window.confirm('确定要删除吗？')) this.props.deleteTodo(id);
    };

    render() {
        const { id, name, done } = this.props;
        const { mouse } = this.state;
        return (
            <li style={{ background: mouse ? '#ddd' : 'white' }} onMouseEnter={this.handleMouse(true)} onMouseLeave={this.handleMouse(false)}>
                <label>
                    <input type="checkbox" checked={done} onChange={this.handleCheck(id)} />
                    <span>{name}</span>
                </label>
                <button onClick={() => this.handleDelete(id)} className="btn btn-danger" style={{ display: mouse ? 'block' : 'none' }}>
                    删除
                </button>
            </li>
        );
    }
}
